<template>
	<view class="content">
		<!-- logo -->
		<view class="logo"><image src="../../static/userpic/8.jpg"></image></view>
		<!-- input -->
		<view class="uni-form-item uni-column"><input type="tel" class="uni-input" placeholder="请输入中文用户名(首次登陆即为注册)" maxlength="5" v-model="name" value=""/></view>
		<view class="uni-form-item uni-column"><input type="number" class="uni-input" placeholder="请输入密码(账号和密码限制5个字符以内)" maxlength="5" v-model="pass" value=""/></view>
		<!-- button -->
		<button type="primary"  @tap="btn()">安全登录</button>
		<!-- 注销 -->
		<view class="Write-off" @tap="off">注销账号</view>
		<view class="bottom">
			<p>微场地服务仅提供测试专用</p>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			name: '',
			pass: ''
		};
	},
	onLoad() {
		// 初始化判断
		if(uni.getStorageSync("name") && uni.getStorageSync("pass")){
			this.name = uni.getStorageSync("name");
			this.pass = uni.getStorageSync("pass");
		}
	},
	methods: {
		// 判断点击登陆状态
		btn() {
			var namepc = /^[\u4E00-\u9FA5]{1,5}$/;
			var namepcs = namepc.test(this.name);
			if(!namepcs){
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '用户名为1-5个中文字符'
				});
			}else if(this.pass == ""){
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '密码不允许为空'
				});
			}else{
				uni.showToast({ title: '登录成功' });
				// 本地存储
				uni.setStorageSync("name",this.name);
				uni.setStorageSync("pass",this.pass);
				setTimeout(function(){
				uni.switchTab({
				
					url: '../tabbar/tabbar-1/tabbar-1'
				});
				},1000)
		
			}
		},
		// 注销触发
		off(){
			if(uni.getStorageSync("name") == ""){
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '检测未注册用户无法注销'
				});
			}else{
				var _self = this;
				uni.showModal({
					title: '注销确认',
					content: '注销当前账号，将清空所有重要的相关数据信息等!',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在处理...'
							});
							setTimeout(function(res){
								uni.hideLoading();
								uni.showToast({ title: '注销成功' });
								// 清除本地存储
								uni.clearStorageSync();
								// 初始化
								_self.name = "";
								_self.pass = "";
							},2000)
						}
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
$color-primary: #25b0f3;
.content {
	padding: 400upx 100upx 0px 100upx;
}
.logo {
	text-align: center;
	image {
		height: 200upx;
		width: 200upx;
		margin: 0 0 60upx;
	}
}
.uni-form-item {
	margin-bottom: 40upx;
	padding: 0;
	border-bottom: 1px solid #e3e3e3;
	.uni-input {
		font-size: 30upx;
		padding: 7px 0;
	}
}
button[type='primary'] {
	background-color: $color-primary;
	border-radius: 0;
	font-size: 34upx;
	margin-top: 60upx;
}
.links {
	text-align: center;
	margin-top: 40upx;
	font-size: 26upx;
	color: #999;
	view {
		display: inline-block;
		vertical-align: top;
		margin: 0 10upx;
	}
	.link-highlight {
		color: $color-primary;
	}
}
.bottom {
	margin-top: 200upx;
	font-size: 12px;
	color: #999;
	letter-spacing: 1px;
	text-align: center;
}
.yh {
	color: #4cd964;
}
.xz {
	color: #dd524d;
}
.Write-off {
	font-size: 12px;
	color: #999;
	margin-top: 20px;
	letter-spacing: 1px;
	text-decoration: underline;
	text-align: right;
}
</style>
